<template>
  <div id="planeWebLink">
    <div id="planeWebTitle">官网专区</div>
    <el-card class="company-info">
      <div id="planeWebLimit">
        <div class="curr-button" @click="carousel.prev()">
          <el-icon ><ArrowLeft /></el-icon>
        </div>
        <div class="play-carousel">
          <el-carousel indicator-position="none"
                       height="100px"
                       arrow="never"
                       ref="carousel"
                       :autoplay="false">
            <el-carousel-item v-for="(items, index) in company" :key="index">
              <div class="carousel-item">
                <div class="item-curr" v-for="item in items" @click="companyInfo = item.info">
                  <span :class="item.logo"></span>
                  <p>{{ item.name }}</p>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="curr-button" @click="carousel.next"><el-icon><ArrowRight /></el-icon></div>
      </div>
      <div style="width: 100%; display: flex; justify-content: center; margin-top: 20px; min-height: 90px">
        <p style="color: #888;font-size: 14px;width: 80%">{{ companyInfo }}</p>
      </div>
    </el-card>


  </div>

</template>

<script setup>
// export default {
//   name: "WebsiteLink"
// }
import {ArrowLeft,ArrowRight} from '@element-plus/icons-vue'
import {ref, useCssModule} from 'vue'

const style =useCssModule()
const carousel = ref(null)
let companyInfo = ref('')

const company = [
    [
      {
        logo: style.nh,
        name: '长安航空',
        info: '长安航空有限责任公司成立于1993年10月15日，是经中国民航总局、陕西省工商局核准成立的航空运输企业。公司于2000年8月30日在陕、琼两省政府、民航总局的关心支持下与海南航空股份有限公司实现重组。为响应国家一带一路发展战略，实现陕西民航强省目标，建设中国最大的新锐低成本航空公司，现已启动长安航空有限责任公司独立运行工作'
      },
      {
        logo: style.fm,
        name: '上海航空',
        info: '上海航空公司成立于1985年12月，是中国国内第一家由地方投资组建的商业化运营的航空公司。2010年1月28日，以东航换股吸收合并上航的联合重组顺利完成，上航成为新东航的成员企业。2010年5月28日，作为东航全资子公司的上海航空有限公司正式挂牌运营。上航目前拥有以波音及空客为主的先进机队70余架，开辟国内航线百余条'
      },
      {
        logo: style.mu,
        name: '东方航空',
        info: '中国东方航空股份有限公司是一家总部设在中国上海的国有控股航空公司，在原中国东方航空集团公司的基础上，兼并中国西北航空公司，联合中国云南航空公司重组而成。东方航空是中国民航第一家在香港、纽约和上海三地上市的航空公司'
      },
      {
        logo: style.g5,
        name: '华夏航空',
        info: '华夏航空有限公司是经中国民用航空总局批准成立的一家总部设在贵州省贵阳市的中国国内专门从事支线航空客货运输业务的中外合资航空公司,是国内首家中外合资的支线航空公司。截至目前，共有8架飞机执飞33条航线，其中非竞争航线25条，非竞争航线比例为78%。'
      },
      {
        logo: style.tv,
        name: '西藏航空',
        info: '西藏航空有限公司是中国民航总局批准成立的国内首家高高原航空公司。主运行基地位于拉萨贡嘎机场，公司于2011年7月26日正式首航，首航航线为拉萨-阿里。西藏航空目前为全空客机队，机型全部为A319-115型，飞机选择安装了性能卓越的、具有高高原适航能力的CFM56-5B发动机。2014年底，公司机队规模将达到10架。'
      },
      {
        logo: style.uq,
        name: '乌鲁木齐航空',
        info: '乌鲁木齐航空有限责任公司是2013年11 月18 日经中国民航总局批准筹建的航空公司，基地位于乌鲁木齐。公司计划于2014年8月首航，目前公司机队运力规模为 3架(机型客机:波音737-800)，2015年还将陆续引进架3-4架该机型。开航初期以疆内航线为主，机队规模扩充后将辐射全国主要干线城市。'
      },
    ],
    [
      {
        logo: style.kn,
        name: '中国联合航空',
        info: '中国联合航空有限公司，是一家以北京南苑机场为主运营基地的民用商业航空公司,前身为 "中国联合航空公司"。2004年，经中国民航总局批准，上海航空股份有限公司与中国航空器材进出口集团公司共同出资一亿元，重新组建成立了"中国联合航空有限公司"。'
      },
      {
        logo: style.gs,
        name: '天津航空',
        info: '天津航空有限责任公司（简称天津航空）于2009 年6月8日挂牌成立，由海航航空集团和天津市政府共同出资组建，扎根环渤海地区经济中心的天津市。天津航空秉承从你出发、亲近世界的品牌定位，致力于提供便捷实用的产品和服务，以善解人意、热爱生活的态度与旅客共同创造美好的旅行体验，让世界更亲近。心之所想，天航所往。'
      },
      {
        logo: style.cz,
        name: '南方航空',
        info: '中国南方航空股份有限公司，是国内运输航班最多、航线网络最密集、年客运量亚洲最大的航空公司。目前，南航经营客货运输机600多架，机队规模居亚洲第一，在IATA全球240个成员航空公司中排名第五，是全球第一家同时运营波音787和空客380的航空公司。公司坚持"安全第一"的核心价值观，标志是以天蓝色垂直尾翼镶抽象化的红色木棉花。'
      },
      {
        logo: style.hu,
        name: '海南航空',
        info: '海南航空股份有限公司，于1993年1月成立，起步于中国最大的经济特区海南省，致力于为旅客提供全方位无缝隙的航空服务。海航拥有波音737、787系列和空客330系列为主的年轻豪华机队，适用于客运和货运飞行，为旅客打造独立空间的优质头等舱与宽敞舒适的全新商务舱。'
      },
      {
        logo: style.ca,
        name: '中国国际航空',
        info: '中国国际航空股份有限公司，其前身中国国际航空公司成立于1988年。根据国务院批准通过的《民航体制改革方案》，2002年10月，中国国际航空公司联合中国航空总公司和中国西南航空公司，成立了中国航空集团公司，并以联合三方的航空运输资源为基础，组建新的中国国际航空公司。'
      },
      {
        logo: style.mf,
        name: '厦门航空',
        info: '厦门航空有限公司,成立于1984年7月25日，是由民航局与福建省合作创办的中国首家按现代企业制度运营的航空公司。现股东为中国南方航空股份有限公司（51%）、厦门建发集团有限公司（34%）和冀中能源股份有限公司（15%）。厦门航空承运人代码为"MF"，企业标志为"蓝天白鹭"。'
      },
    ]
]



</script>

<style scoped>
#planeWebLink{
  margin-top: 20px;
  margin-left: 150px;
  min-height: 200px;
  width: 1250px;
}
#planeWebTitle{
  line-height: 70px;
  font-family: "仓耳渔阳体 W04", serif;
  font-size: 40px;
  text-align: left;
  width: 1250px;
  height: 80px;
}
#planeWebLimit{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}
.play-carousel {
  width: 660px;
}
.curr-button {
  margin: 0 5px 0 5px;
  width: 30px;
  height: 100px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.curr-button:hover {
  background-color: #00C7771A;
}
.carousel-item {
  display: flex;
  justify-content: center;
  border-right: 1px solid #e4e4e4;
}
.item-curr {
  width: 110px;
  height: 100px;
  box-sizing: border-box;
  background-color: #fff;
  text-align: center;
  color: #888;
  border: 1px solid #e4e4e4;
  border-right-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.item-curr:hover {
  background-color: #00C7771A;
}
.item-curr span{
  width: 32px;
  height: 32px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.item-curr p {
  margin-top: 10px;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
}
.company-info {
  display: flex;
  flex-direction: column;
  align-items: center;

}
</style>

<style module>

.nh{
  background: url(../../assets/images-company-logo/9H.svg) no-repeat;
}
.fm {
  background: url(../../assets/images-company-logo/FM.svg) no-repeat;
}
.mu {
  background: url(../../assets/images-company-logo/MU.svg) no-repeat;
}
.g5 {
  background: url(../../assets/images-company-logo/G5.svg) no-repeat;
}
.tv {
  background: url(../../assets/images-company-logo/TV.svg) no-repeat;
}
.uq {
  background: url(../../assets/images-company-logo/UQ.svg) no-repeat;
}
.kn {
  background: url(../../assets/images-company-logo/KN.svg) no-repeat;
}
.gs {
  background: url(../../assets/images-company-logo/GS.svg) no-repeat;
}
.cz {
  background: url(../../assets/images-company-logo/CZ.svg) no-repeat;
}
.hu {
  background: url(../../assets/images-company-logo/HU.svg) no-repeat;
}
.ca {
  background: url(../../assets/images-company-logo/CA.svg) no-repeat;
}
.mf {
  background: url(../../assets/images-company-logo/MF.svg) no-repeat;
}
</style>